<template>
	<div>
		<div id="home" class="page">
			<header class="nav-bar">
				<!--通过query传值-->
				<!--路由配置path不改变，子页面在created里用this.$route接收-->
				<!--参数不传也能显示子页面-->
				
				<!--path路径写法-->
				<!--<router-link :to="'/home/location/?lon='+111+'&lat='+222" class="nav-btn nav-btn-left">定位</router-link>-->
				<router-link :to="{name:'location',query:{lon:111,lat:222}}" class="nav-btn nav-btn-left">定位</router-link>
				<h1 class="title">首页</h1>
				<router-link to="/home/weather" class="nav-btn nav-btn-right">天气</router-link>
			</header>
			
			<div class="home-content">
				<li class="home-content-item" v-for="(item,index) in itemData">
					<!--父页面给子页面传值-->
					<!--路由path配置加/:，子页面在created里用this.$route接收-->
					<!--必须有传值才能显示子页面-->
					
					<!--path路径写法-->
					<!--<router-link :to="'/home/detail/'+item+'/'+index">{{item}}</router-link>-->
					<!--路由配置了name的写法-->
					<router-link :to="{name:'detail',params:{title:item,index:index}}">{{item}}</router-link>
				</li>
			</div>
			
		</div>
		<!--因为子页面是另外一个页面的内容
			为了避免结构混乱
			所以要放在与home平级中
			再用一个div包裹起来-->
		<transition name="slide">		
			<router-view></router-view>
		</transition>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				itemData:["item1","item2","item3","item4","item5","item6","item7"]
			}
		},
		created(){
			//接收detail子页面传的值
			this.center.$on("detail-home",({title,index})=>{
				this.itemData.splice(index,1,title)
				
				
				//使用js切换页面
				//this.$router.push("/home")===location.href = "http://localhost:8080/#/home"
				//this.$router.back()===history.back()
				//this.$router.go(-1)===history.go(-1)
				this.$router.go(-1)
			})
		}
	}
</script>

<style>
/*引入样式*/
/*@import url("../../../static/home.css");*/
	.nav-bar{
		position: fixed;
		left: 0;
		top: 0;
		height: 44px;
		width: 100%;
		background: #007DDB;
		overflow: hidden;
	}
	.nav-bar .title{
		text-align: center;
	}
	.nav-btn{
		display: block;
		text-align: center;
		line-height: 38px;
		position: absolute;
		top: 2px;
		background: #FFF2F2;
		border: 1px solid #0000FF;
		border-radius: 3px;
		width: 48px;
		height: 38px;
		font-size: 16px;
	}
	.nav-btn-left{
		left: 2px;
	}
	.nav-btn-right{
		right: 2px;
	}
	.home-content{
		position: absolute;
		width: 100%;
		top: 44px;
		left: 0;
		bottom: 0;
		overflow: auto;
	}
	.home-content .home-content-item{
		width: 100%;
		height: 100px;
		line-height: 100px;
		font-size: 30px;
		position: relative;
	}
	.home-content .home-content-item a{
		display: block;
	}
	.home-content .home-content-item:after{
		content: "";
		width: 100%;
		height: 1px;
		position: absolute;
		left: 0;
		bottom: -1px;
		background: #080808;
		transform: scaleY(0.5);
	}
</style>